<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="order-info">
            <view class="order-info-left">
                <view class="item">
                    <text class="label">出库单号：</text>
                    <text class="value">L-202109104444</text>
                </view>
                <view class="item">
                    <text class="label">所属仓库：</text>
                    <text class="value">北京仓</text>
                </view>
                <view class="item">
                    <text class="label">出库时间：</text>
                    <text class="value">2021-02-15 14:18:30</text>
                </view>
                <view class="item">
                    <text class="label">物流日期：</text>
                    <text class="value">2021-02-15 14:18:30</text>
                </view>
                <view class="item">
                    <text class="label">物流公司：</text>
                    <text class="value"></text>
                </view>
                <view class="item">
                    <text class="label">物流单号：</text>
                    <text class="value"></text>
                </view>
                <view class="item">
                    <text class="label">物流备注：</text>
                    <text class="value"></text>
                </view>
            </view>
            <view class="order-info-right">
                <view class="show-more" @click="showPro = !showPro">
                    <text>4种商品</text>
                    <uni-icons class="icon" size="26" :type="showPro ? 'arrowup' : 'arrowdown'"></uni-icons>
                </view>
                <image class="state-image" src="../../static/logo.png"></image>
            </view>
        </view>
        <scroll-view scroll-y v-if="showPro">
            <view class="pro-item">
                <text class="pro-name">海飞丝</text>
                <view class="pro-desc">
                    <text class="pro-num">1231212</text>
                    <text class="pro-amount">x2</text>
                </view>
            </view>
            <view class="pro-item">
                <text class="pro-name">海飞丝</text>
                <view class="pro-desc">
                    <text class="pro-num">1231212</text>
                    <text class="pro-amount">x2</text>
                </view>
            </view>
            <view class="pro-item">
                <text class="pro-name">海飞丝</text>
                <view class="pro-desc">
                    <text class="pro-num">1231212</text>
                    <text class="pro-amount">x2</text>
                </view>
            </view>
            <view class="pro-item">
                <text class="pro-name">海飞丝</text>
                <view class="pro-desc">
                    <text class="pro-num">1231212</text>
                    <text class="pro-amount">x2</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            config: {
                title: "出库发货",
                centerSlot: true,
            },
            showPro: false,
        }
    },
    mounted() {},
    onShow() {},
    methods: {},
}
</script>

<style lang="scss">
.order-info {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;
    background: $color-white;
    .order-info-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        text {
            color: $app-color-text-main;
        }
    }
    .order-info-right {
        display: flex;
        flex-direction: column;
        .show-more {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 8rpx;
            text {
                color: $app-color-text-tip;
            }
            .icon {
                display: flex;
                margin-left: 6rpx;
                margin-top: 6rpx;
            }
        }
        .state-image {
            width: 140rpx;
            height: 140rpx;
        }
    }
}
.pro-item {
    padding: $app-page-padding;
    background: $app-color-input-bg;
    border-bottom: solid 1rpx #eee;
    .pro-name {
        display: flex;
        font-weight: 700;
        margin-bottom: 10rpx;
    }
    .pro-desc {
        display: flex;
        justify-content: space-between;
        text {
            color: $app-color-text-tip;
        }
    }
}
</style>
